<template>
  <div class="forum-add">
    <n-modal v-model:show="showModal" style="height: 700px;" class="overflow-auto">
      <n-card
          style="width: 880px"
          title="发布"
          size="huge"
          role="dialog"
          aria-modal="true"
      >
        <template #header-extra>
          <n-button type="primary" class="float-right mr-8" @click="handlePublish">发布</n-button>
        </template>
        <n-form
            ref="formRef"
            :label-width="80"
            label-placement="left"
            :model="form"
            :rules="rules"
        >
          <n-form-item label="标题" path="title">
            <n-input
                v-model:value="form.title"
                placeholder="请输入标题"
            />
          </n-form-item>
          <n-form-item label="类型" path="type">
            <n-select
                v-model:value="form.type"
                placeholder="请选择类型"
                :options="generalOptions"
                label-field="dictLabel"
                value-field="dictValue"
            />
          </n-form-item>
          <n-form-item label="相关话题" path="aboutList">
            <n-radio-group v-model:value="form.courseType" name="courseType">
              <n-space>
                <n-radio v-for="course in courseList" :key="course.id" :value="course.id">
                  {{ course.name }}
                </n-radio>

              </n-space>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="内容" path="content">
            <editor
                class="w-full"
                placeholder="请输入"
                :editor-height="'300px'"
                @change="(content) => form.content = content"
            />
          </n-form-item>
        </n-form>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import editor from "@/components/editor/Editor.vue";
import {requestTypeList} from "@/api/study/studyApi";
import {onMounted} from "vue";
import {requestArticlePage} from "@/api/bbs/bbsApi";
import {requestDictList} from "../../../api/common/commonApi";
import {DictList} from "../../../api/common/DictKey";
import {requestCreateOrUpdateArticle} from "../../../api/bbs/bbsApi";
// 弹框是否展示
const showModal = ref(false)
// 表单引用
const formRef = ref()
const form = ref({
  title: null,
  type: null,
  content: '',
  courseType: null
})

const courseList = ref([])
const getCourseList = () => {
  requestTypeList().then(res => {
    courseList.value = res.data
  })
}

onMounted(() => {
  getCourseList()
})
const rules = {
  title: {
    required: true,
    message: "请输入标题",
    trigger: ["input", "blur"]
  },
  type: {
    required: true,
    message: "请选择类型",
    trigger: ['blur', 'change']
  },
  content: {
    required: true,
    message: "请输入内容",
    trigger: ["input", "blur"]
  },
  courseType: {
    type: "number",
    required: true,
    trigger: "change",
    message: "请选择相关语言"
  }
}
const generalOptions = ref([])

requestDictList(DictList.forumType).then(res => {
  generalOptions.value = res.data
})
const emit = defineEmits(['refresh'])

const handlePublish = (e) => {
  console.log(form.value);
  // e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      // console.log(form.value);
      requestCreateOrUpdateArticle(form.value).then(resolve => {
        form.value = {}
        $message.success('提交成功')
        showModal.value = false
        //刷新数据
        emit('refresh')
      })

    }
  });
}
defineExpose({
  showModal
})
</script>

<style lang="less" scoped>
.forum-add {
}
</style>